<template>
  <el-form :model="form" label-width="auto" style="max-width: 1620px"><br>
    <el-form-item label="BI模板json">
      <el-input v-model="form.config" type="textarea" rows="10" clearable class="scrollable-textarea"></el-input>
      <el-button type="primary" @click="onSubmitConfig" style="margin-left: 0px;border-left: 0px">加载BI模板</el-button>
    </el-form-item>
  </el-form>
  <el-form :model="form" label-width="auto" style="max-width: 1620px"><br>
    <el-form-item label="onUpdateDatasetList">
      <el-input v-model="form.onUpdateDatasetList" type="textarea" rows="2" class="scrollable-textarea"/>
      <el-button type="primary" @click="onSubmitDatasetList">加载外部数据集</el-button>
    </el-form-item>
  </el-form>
  <el-form :model="form" label-width="auto" style="max-width: 1620px"><br>
    <el-form-item label="onUpdateData">
      <el-input v-model="form.onUpdateData" type="textarea" rows="2" class="scrollable-textarea"/>
      <el-button type="primary" @click="onSubmitDataset">加载数据记录</el-button>
    </el-form-item>
    <el-form-item>
      <el-button @click="saveChartDesignerMainData('chartDesignercd8main')">保存数据</el-button>
      <el-button @click="cleanPiniaCacheData('chartDesignercd8main')">清除缓存</el-button>
      <el-button @click="cleanPiniaCacheDataAndCanvas('chartDesignercd8main')">清除画布</el-button>
    </el-form-item>
  </el-form>
  <div id="container_cd8_main" style="width: 100%; height: 1024px"></div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";

import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
// import lsyjkb from "./lsyjkb.json"
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

let option = { //参数配置说明 根据您的需求填写option
  uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
    server: "url",//上传图片地址
    method: "post",//上传图片请求方式
    headers: { //上传图片请求头
      "Authorization": "Token XXXXXXXX"
    },
    fieldName: "file",
    resultField: "file"
  },
  pageData: { //画布初始化时的宽高
    width: '1920px',
    height: '1080px'
  },
  dataSet: [ //数据集按钮的方式
    { //Json数据
      id: 1,
      value: "新建Json数据集"
    },
    { //http请求数据
      id: 2,
      value: "新建Http接口数据集"
    },
    { //API服务数据
      id: 3,
      value: "API服务数据集"
    },
    {
      id: 4,
      value: "外部数据集"  //  新建一个新的报表实例，如果希望可以预先动态从后台提供几个数据集供其使用，这个配置必须有；
      // 然后只要动态的从后台拿到n个数据集，全部用 results格式装配，onUpdateDatasetList方法来触发
    }
  ]
}
let _onUpdateDatasetList = [];//存放所有的外部数据集
const onUpdateDatasetList = () => {
  console.log("..._onUpdateDatasetList:", _onUpdateDatasetList);

  return new Promise((resolve, reject) => {
    // resolve的数据格式
    // let results = [
    //   {
    //     name:"测试",  //必填项
    //     id:"测试",   //必填项
    //     fields:[],  // 数据表中字段 字段的数据结构 {name:"字段名称",data_type:"字段类型"} data_type => 1日期 2数字 3字符串
    //     params:[],  // 数据表中参数 参数耳朵数据结构 {name:"参数名称",data_type:"参数类型"} data_type => 1日期 2数字 3字符串
    //   }
    // ]
    // resolve(results)
    resolve(_onUpdateDatasetList);
  })
}
option.onUpdateDatasetList = onUpdateDatasetList

let _onUpdateData = [];//存放所有的数据记录
// datasets => [{name:"数据表名称",id:"数据表id"...}]  参与获取数据的数据集
// params => [{name:"参数名称",value:"参数值"}]  value的类型是字符串或者数组
// 该方法的返回值是一个Promise
const onUpdateData = (datasets, params) => {
  console.log("...datasets:", datasets);
  console.log("...params:", params);
  return new Promise((resolve, reject) => {
    console.log("..._onUpdateData:", _onUpdateData);
    resolve(_onUpdateData);
    // resolve的数据格式
    // let results = [
    //   {
    //     name:"测试", //必填项
    //     id:"测试" //必填项
    //     response_data:[] // [{a:1,b:2}]
    //   }
    // ]
    // resolve(results)

  })
}
option.onUpdateData = onUpdateData

let designer;
let _biTemplate;
onMounted(() => {

  try {

    designer = new XZChartDesigner("#container_cd8_main", option);
  } catch (e) {
    console.log(".....onMounted:", e);
  }
})
const usePreStore = usePreviewStore();
const form = reactive({
  config: reactive([]),
  onUpdateDatasetList: reactive([]),
  onUpdateData: reactive([]),
  region: '',
  name: '',
})

const onSubmitConfig = () => {
  if (form.config.length > 0) {
    _biTemplate = JSON.parse(form.config);
    loadData();

  }

}
const onSubmitDatasetList = () => {
  if (form.onUpdateDatasetList.length > 0) {
    _onUpdateDatasetList = JSON.parse(form.onUpdateDatasetList);
  }
}
const onSubmitDataset = () => {
  if (form.onUpdateData.length > 0) {
    _onUpdateData = JSON.parse(form.onUpdateData);
  }
}
const loadData = () => {
  // data.forEach((dataItem) => {
  //   if (dataItem.type === '4' || dataItem.type === 4) {
  //     console.log("这里加载报表模板，相当于是json数据集，type必须改为1，否则onupdatedata方法会报错");
  //     dataItem.type = "1";
  //   }
  // })
  try {//画布设计器的数据回显
    document.getElementById("container_cd8_main").innerHTML = "";//不可以缺少?。
    designer = new XZChartDesigner("#container_cd8_main", option, _biTemplate)
  } catch (e) {
    console.log("-------;error...", e);
  }

}

function saveChartDesignerMainData(chartDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置


  let config = designer.getSaveData().config;
  let dataConfig = designer.getSaveData().data.dataConfig;
  try {
    usePreStore.saveChartDesignerPreviewData(chartDesignerPreviewId, config, dataConfig, _onUpdateDatasetList, _onUpdateData);

  } catch (err) {
    console.log('==============saveChartDesignerMainData=======error=====', err);
  }
  console.log("designer.getSaveData()即chartDesigner_template:", designer.getSaveData())
  console.log("designer.getSaveData().config:", config)
  console.log("designer.getSaveData().data.dataConfig:", dataConfig);
}

function cleanPiniaCacheData(chartDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  usePreStore.cleanChartDesignerPreviewData(chartDesignerPreviewId);

}

function cleanPiniaCacheDataAndCanvas(chartDesignerPreviewId) {
  cleanPiniaCacheData(chartDesignerPreviewId);
  try {
    //designer = new XZChartDesigner("#container_cd8_main", option,lsyjkb);
    document.getElementById("container_cd8_main").innerHTML = "";//不可以缺少，因为点击preview时候，config是有可能变了。

    designer = new XZChartDesigner("#container_cd8_main", option);
  } catch (e) {
    console.log(".....cleanPiniaCacheDataAndCanvas:", e);
  }
}
</script>
